<template>
    <div id="authority">
        <div class="quanxian">
            <el-tabs v-model="activeName" >
                <el-tab-pane label="管理员管理" name="first">
                    <div class="ati_card">

                        <el-card class="box-card">
                            <div class="tag-group">
                                <span class="tag-group__title"></span>
                                <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
                                    {{ item.label }}
                                </el-tag>
                            </div>
                            <div slot="header" class="clearfix">
                                <span>01 牛奶煮萝莉</span>
                                <el-button type="primary" class="btn_bianji" plain>编辑</el-button>
                                <el-button type="danger" plain class="btn_shanchu">删除</el-button>
                            </div>
                            <div v-for="o in card" :key="o" class="text item">
                                {{o}}
                            </div>
                            <span class="ati_phone">13529515236</span>
                            <span class="ati_e-mail">2659653541@qq.com</span>
                            <span class="ati_name">张珊珊</span>
                            <span class="ati_ip">299.233.20.00</span>
                            <span class="ati_time">2021-08-23 08:36:59</span>
                        </el-card>
                        <el-card class="box-card">
                            <div class="tag-group">
                                <span class="tag-group__title"></span>
                                <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
                                    {{ item.label }}
                                </el-tag>
                                <el-tag type="success" label='财务'>财务
                                </el-tag>
                            </div>
                            <div slot="header" class="clearfix">
                                <span>01 牛奶煮萝莉</span>
                                <el-button type="primary" class="btn_bianji" plain>编辑</el-button>
                                <el-button type="danger" plain class="btn_shanchu">删除</el-button>
                            </div>
                            <div v-for="o in card" :key="o" class="text item">
                                {{o}}
                            </div>
                            <span class="ati_phone">13529515236</span>
                            <span class="ati_e-mail">2659653541@qq.com</span>
                            <span class="ati_name">张珊珊</span>
                            <span class="ati_ip">299.233.20.00</span>
                            <span class="ati_time">2021-08-23 08:36:59</span>
                        </el-card>
                    </div>

                    <el-button class="btn_tj" type="primary" @click="dialogFormVisible = true">添加</el-button>

                    <el-dialog title="管理员编辑" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="用戶名" :label-width="formLabelWidth">
                                <el-input v-model="form.nm" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input v-model="form.pas" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" :label-width="formLabelWidth">
                                <el-input v-model="form.qpas" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                                <el-input v-model="form.znm" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" :label-width="formLabelWidth">
                                <el-input v-model="form.php" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="e-mail" :label-width="formLabelWidth">
                                <el-input v-model="form.email" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所属角色" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="" value=""></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">

                            <el-button class="btn_qd" type="primary" @click="dialogFormVisible = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="角色管理" name="second">
                        <div class="tj_btn"><el-button class="name_btn" type="success">添加</el-button></div>
                        <div class="name_card">
                           <ul>
                               <li>
                                   <div class="_jingli">
                                       <span class="lt_jingli">01 经理</span>
                                    </div>
                                    <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                                    <div class="juesemiaoshu"><span>角色描述</span></div>
                                    <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                                    <div class="zhuangtai"><span>状态</span></div>
                                    <div class="zhengchang">正常</div>
                                    <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                                    <div class="btn_three"><ul>
                                        <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                        <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                        <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                                    </ul></div>
                            </li>
                               <li>
                                <div class="_jingli">
                                    <span class="lt_jingli">01 经理</span>
                                 </div>
                                 <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                                 <div class="juesemiaoshu"><span>角色描述</span></div>
                                 <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                                 <div class="zhuangtai"><span>状态</span></div>
                                 <div class="zhengchang">正常</div>
                                 <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                                 <div class="btn_three"><ul>
                                     <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                     <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                     <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                                 </ul></div>
                               </li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                 <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                 <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                 <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                 <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                 <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                 <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                              <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                              <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                              <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                               <li>  <div class="_jingli">
                                <span class="lt_jingli">01 经理</span>
                             </div>
                             <div class="tuoyuan"><img src="../image/椭圆 522.png" alt=""></div>
                             <div class="juesemiaoshu"><span>角色描述</span></div>
                             <div class="caiwucx"><span>财务查询的查看和更改财务查询的查看和更改</span></div>
                             <div class="zhuangtai"><span>状态</span></div>
                             <div class="zhengchang">正常</div>
                             <div><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                             <div class="btn_three"><ul>
                                 <li><el-button class="shanchu_btn" type="danger" plain>删除</el-button></li>
                                 <li><el-button  class="quanxian_btn" type="success" plain>权限</el-button></li>
                                 <li> <el-button class="bianji_btn" type="primary" plain>编辑</el-button></li>
                             </ul></div></li>
                           </ul>
                           
                           
                        </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                card: ["手机号", "e-mail", "真是姓名", "最后登录IP", "最后登录时间"],
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                items: [
                    { type: '', label: '经理' },

                ],
                activeName:"first"
            };
        }

    };
</script>
<style scoped>
    .bianji_btn{
        width: 0.5rem;
        height: 0.18rem;
    }
    .quanxian_btn{
        width: 0.5rem;
 height: 0.18rem;
    }
    .shanchu_btn{
        width: 0.5rem;
        height: 0.18rem;
    }
    .btn_three>ul>li{
        float: left;
        margin-left: 0.1rem;
    }
    .zhengchang{
        position: absolute;
        top: 0.6rem;
        left: 0.7rem;
    }
    .zhuangtai{
        margin-top: 0.2rem;
margin-left: 0.1rem;
    }
    .caiwucx{
        position: absolute;
        top: 0.32rem;
        left: 0.7rem;
       
       
    }
    .juesemiaoshu{
        margin-top: 0.1rem;
        margin-left: 0.1rem;
        display: inline-block;
    }
    .tuoyuan{
        position: absolute;
        right: 0.05rem;
        top: 0.05rem;
    }
  ._jingli{
    margin-top: 0.1rem;
    margin-left: 0.1rem;
  }
  
  
    .lt_jingli{
        font-size: 0.08rem;
        font-weight: 700;
       
    }
    .name_card{
        position: relative;
        top: 0.35rem;
        width: 100%;
        height: 4rem;
        /* background-color:red; */
    }
    .name_card>ul>li{
        width: 1.85rem;
        height: 1.1rem;
        position: relative;
        background-color: #fff;
        float: left;
        margin-left: 0.1rem;
        margin-top: 0.1rem;
        border-radius: 0.02rem;
    }
    .tj_btn{
        float: right;
        margin-right: 0.1rem;
        margin-top: 0.1rem;
    }
.el-tabs__nav-scroll {
    overflow: hidden;
    background-color: #fff;
}
    .btn_bianji[data-v-1e51160e] {
        position: absolute;
        bottom: 30px;
        right: 30px;
        width: 134px;
    }
    .name_btn{
        width: 0.5rem;
        height: 0.2rem;

    }

    .btn_shanchu[data-v-1e51160e] {
        position: absolute;
        bottom: 30px;
        left: 20px;
        width: 134px;
    }

    .btn_bianji {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }

    .btn_shanchu {
        position: absolute;
        bottom: 30px;
        left: 20px;
        
    }

    .el-card {
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
        height: 360px;
        width: 200px;
    }

   div /deee/ .box-card[data-v-1e51160e] {
        width: 2rem !important;
    }

    .box-card {
        position: relative;
        display: inline-block;
        margin-left: 30px;
    }


    .tag-group {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .ati_time {
        position: absolute;
        top: 229px;
        left: 160px;
    }

    .ati_ip {
        position: absolute;
        top: 190px;
        left: 160px;
    }

    .ati_name {
        position: absolute;
        top: 155px;
        left: 160px;
    }

    .ati_e-mail {
        position: absolute;
        top: 115px;
        left: 160px;
    }

    .ati_phone {
        /* display: inline-block; */
        position: absolute;
        top: 78px;
        left: 160px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .ati_card {
        width: 100%;
        height: 100%;
        /* background-color: pink; */
        position: relative;
        top: 80px;

    }

    .btn_qd {
        width: 150px;
        position: absolute;
        bottom: 13px;
        right: 500px;
    }

    .quanxian {
        /* background-color: #fff; */
        width: 100%;
        height: 100%;
        margin-top: 10px;
        position: relative;
        /* background-color: skyblue; */
    }

    .btn_tj {
        background-color: #69C243;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #69C243;
        width: 100px;
    }

    .el-form {
        margin-left: 150px;
        margin-top: 15px;
    }

    .el-dialog__header {
        margin-left: 300px;
    }
    #authority{
    width: 100%;
    height: 100%;
    /* background-color: red; */
    }
  div /deep/  .box-card[data-v-53d32885] {
    width: 2rem;
}
</style>